<script setup>
import { ref } from 'vue'
/**
 ref 函数包裹的响应式数据
 -在模板中使用，正常使用
 -在scrip标签中，需要 .value
 */
const person = ref({
  name: '董尚喜',
  age: 20,
})
const changeName = () => (person.value.name = '小董')
const addAge = () => person.value.age++

const car = ref('环保自行车')
const changeCar = () => (car.value = '劳斯莱斯')
</script>

<template>
  <div>
    <div>{{ person }}</div>
    <button @click="changeName">修改姓名</button>
    <button @click="addAge">增加年龄</button>
    <hr />
    <div>{{ car }}</div>
    <button @click="changeCar">换车</button>
  </div>
</template>

<style scoped></style>
